<template>
    <nav class="header" :style="{
        backgroundColor: scrollPosition > 100 ? '#fff' : currentRoute.path != '/numReal' ? 'rgba(0,0,0,0.2)' : '#fff'
    }">
        <div class="header-nav" v-if="webH5show">
            <h1 class="logo-top">
                <img src="../assets/images/gll-wwt-logo.png" alt="logo">
            </h1>

            <ul class="nav-top">
                <li v-for="item in navData">
                    <div class="navPath" @click="fnRouteL(item)"
                        :style="{ color: scrollPosition > 100 ? '#000' : currentRoute.path != '/numReal' ? '#fff' : '#000', }">
                        {{ item.text }}</div>
                </li>
            </ul>

            <div @click="fnRouteL({ text: '供应链' })" :style="{
                color: scrollPosition > 100 ? '#000' : currentRoute.path != '/numReal' ? '#fff' : '#000',
                borderColor: scrollPosition > 100 ? '#000' : currentRoute.path != '/numReal' ? '#fff' : '#000',
            }" class="loginGoods">商家登录</div>
            <div :style="{
                color: scrollPosition > 100 ? '#000' : currentRoute.path != '/numReal' ? '#fff' : '#000',
                borderColor: scrollPosition > 100 ? '#000' : currentRoute.path != '/numReal' ? '#fff' : '#000',
            }" class="loginGoods" @click="$router.push('/antifake')">员工防伪</div>

        </div>
        <div class="web-header" v-if="!webH5show">
            <h1 class="logo-top">
                <img src="../assets/images/gll-wwt-logo.png" alt="logo">
            </h1>
            <span class="iconfont icon-fenlei" :style="{ color: scrollPosition > 100 ? '#000' :currentRoute.path != '/numReal' ? '#fff' : '#000' }"
                @click="drawer = true"></span>
            <el-drawer v-model="drawer" size="50%" :with-header="false">
                <!-- :direction="direction"  :before-close="handleClose"-->
                <div class="iconBox">
                    <span class="iconfont icon-cuohao" @click="drawer = false"></span>
                </div>
                <ul class="right_box">
                    <li v-for="item in navData">
                        <div @click="fnRouteL(item)">
                            {{ item.text }}
                        </div>
                    </li>
                    <li>
                        <div @click="fnRouteL({ text: '供应链' })">商家登录</div>
                    </li>
                    <li>
                        <div @click="$router.push('/antifake')">员工防伪</div>
                    </li>
                </ul>
            </el-drawer>
        </div>

    </nav>


</template>
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { useRouter } from 'vue-router';
const navData = ref([{ path: '/', text: '首页' },
{ path: '/', text: '供应链' },
{ path: '/marketing', text: '营销体系' },
{ path: '/numReal', text: '数实一体化' },
{ path: '/about', text: '关于我们' }])
const scrollPosition = ref(0);

const router = useRouter();

// 获取当前路由对象  
const currentRoute = router.currentRoute.value;
// console.log(currentRoute.path);
const fnRouteL = (item) => {
    if (item.text !== '供应链') {
        router.push(item.path)
        return
    } else {
        window.open("https://www.wwtscm.com/")
    }
}
onMounted(() => {
    window.addEventListener('scroll', handleScroll);
});
onUnmounted(() => {
    window.removeEventListener('scroll', handleScroll);
});
// 移动端--------------------------------------------------------
const webH5show = ref(true)
function webH5Fn() {
    if (window.innerWidth <= 1000) {
        webH5show.value = false
    }
}
webH5Fn()
const handleScroll = () => {
    scrollPosition.value = window.scrollY || document.body.scrollTop + (document.documentElement && document.documentElement.scrollTop || 0);

};
// 抽屉
const drawer = ref(false)
</script>
<style scoped lang="scss">
@import "@/assets/base.scss";

.header {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 9;
    font-size: $title-font-size5;

    .web-header {
        //移动端样式
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 3vw;
        height: 10vw;
        font-size: 4vw;

        .logo-top {
            img {
                width: 30vw;
                // height: 10vw;
                position: relative;
                top: -1.5vw;
            }
        }

        .iconfont {
            font-size: 6vw;
            // color: #fff;
        }

        .right_box {
            width: 100%;
            padding: 0 3vw;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            border-bottom: #E8E8E8 solid 0.1vw;

            li {
                height: 10vw;
                line-height: 10vw;
                color: #222;
            }

        }

        ::v-deep .el-overlay {
            .el-drawer {
                height: 84vw;

                .el-drawer__header {
                    margin-bottom: 0;
                    padding: 1vw;
                }

                .el-drawer__body {
                    padding: 2vw 0 5vw 0;
                    border-bottom: #E8E8E8 solid 0.1vw;

                    .iconBox {
                        border-bottom: #E8E8E8 solid 0.1vw;
                        display: flex;
                        align-items: center;
                        justify-content: end;
                        padding-bottom: 1vw;
                        padding-right: 3vw;
                    }

                    .iconfont {
                        color: #000;
                    }
                }
            }

        }
    }

    .header-nav {
        width: 65%;
        margin: 0 auto;
        display: flex;
        align-items: center;
    }

    .logo-top {
        width: 9vw;
        display: flex;
        align-items: center;

        img {
            width: 100%;
        }
    }

    .nav-top {
        flex: 1;
        display: flex;
        justify-content: end;

        li {
            width: 8.02vw;
            height: 3.75vw;
            line-height: 3.75vw;
            margin-left: 0.94vw;

            .navPath {
                display: block;
                color: #000;
                text-align: center;
                height: 100%;
                font-weight: 700;
                cursor: pointer;

                &:hover {
                    background-color: rgba($color: $firm-color, $alpha: 0.1);

                    &::after {
                        transform: scaleX(1);
                    }
                }

                &::after {
                    content: '';
                    display: block;
                    height: 0.3vw;
                    width: 100%;
                    transition: all 0.3s;
                    transform: scaleX(0);
                    background-color: $firm-color ;
                }
            }
        }
    }

    .loginGoods {
        width: 4.17vw;
        height: 1.56vw;
        margin-right: 1vw;
        text-align: center;
        line-height: 1.5vw;
        border: 0.1vw #efefef solid;
        border-radius: 0.1vw;
        cursor: pointer;
    }
}
</style>
